<template>
     <view>
          <div class="pre-item">
               <i class="picon-pre" @click="preDate" ></i>
               <ul class="list-date">
                    <li :class="{ 'active': activeIndex == index }" @click="changeIndex(index)"
                         v-for="(item, index) in weekList" :key="index">
                         <p>{{ format(item, 'd') }}</p>
                         <h5>{{ format(item) }}</h5>
                    </li>
               </ul>
               <i class="picon-next" @click="nextDate"></i>
          </div>
          <view style="height: 120rpx;"></view>
          <view class="cont">
               <view @tap="selectTime(item)" :class="{ active: isSlected(item) }" v-for="(item, index) in dateTime"
                    :key="item" class="time-item">{{ item }}</view>
          </view>

          <view class="save-p">
               <view @tap="save" class="save-btn">保存</view>
          </view>

          <view class="space"></view>
     </view>
</template>
<script>
import { getRestList, saveRest } from '@/api/restApi'
import dayjs from 'dayjs';
export default {
     data() {
          return {
               selected: [],
               dateTime: [
                    '00:00',
                    '00:30',
                    '01:00',
                    '01:30',
                    '02:00',
                    '02:30',
                    '03:00',
                    '03:30',
                    '04:00',
                    '04:30',
                    '05:00',
                    '05:30',
                    '06:00',
                    '06:30',
                    '07:00',
                    '07:30',
                    '08:00',
                    '08:30',
                    '09:00',
                    '09:30',
                    '10:00',
                    '10:30',
                    '11:00',
                    '11:30',
                    '12:00',
                    '12:30',
                    '13:00',
                    '13:30',
                    '14:00',
                    '14:30',
                    '15:00',
                    '15:30',
                    '16:00',
                    '16:30',
                    '17:00',
                    '17:30',
                    '18:00',
                    '18:30',
                    '19:00',
                    '19:30',
                    '20:00',
                    '20:30',
                    '21:00',
                    '21:30',
                    '22:00',
                    '22:30',
                    '23:00',
                    '23:30'
               ],
               weekList: [
                  
               ],
               activeIndex: 0,
			datePage: 0,
			
          }
     },

     methods: {
          selectTime(item) {
               if (this.isSlected(item)) {

                    for (let i = 0; i < this.selected.length; i++) {
                         if (item == this.selected[i]) {
                              this.selected.splice(i, 1)
                         }
                    }
               } else {
                    this.selected.push(item)
               }

          },
          isSlected(item) {
               return this.selected.includes(item)
          },
          async save() {
               let res = await saveRest({ 
                    times: this.selected,
                    restDay: this.weekList[this.activeIndex].format('YYYY-MM-DD')
               })
               console.log(res)

               // uni.navigateBack()
               uni.showToast({
                    title: '保存成功',
               })
          },
          async getRestList(){
               let res = await getRestList({
                    restDay: this.weekList[this.activeIndex].format('YYYY-MM-DD')
               })
               this.selected = res.data.map(item => item.time)
          },
          preDate() {
			this.datePage--
			this.setWeekList(this.datePage)
			this.changeIndex(0)
		},
		nextDate() {
			this.datePage++
			this.setWeekList(this.datePage)
			this.changeIndex(0)
		},
		changeIndex(index) {
			this.activeIndex = index
			console.log(this.weekList[index])
               this.getRestList()
		},
		setWeekList(page) {
			var index = 0
			for (let i = page * 7; i <= 6 + page * 7; i++) {
				this.$set(this.weekList, index, dayjs().add(i, 'day'))
				index++
			}
			
		},

          format(item, format){
               var week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
               if(format == 'd'){
                    if(item.format('YYYY-MM-DD') == dayjs().format('YYYY-MM-DD')){
                         return '今天'
                    }
                    if(item.format('YYYY-MM-DD') == dayjs().add(1, 'day').format('YYYY-MM-DD')){
                         return '明天'
                    }
                    return week[item.format(format)]
               }
               if(format){
                    return item.format(format)
               }
               return item.format('MM/DD')
          }

     },

     async onLoad() {
          this.setWeekList(this.datePage)
          this.changeIndex(0)

         
     }
}
</script>
<style lang="scss">
.cont {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
}

.time-item {
     width: 100rpx;
     height: 50rpx;
     border-radius: 20rpx;
     border: 1rpx solid $uni-primary;
     color: $uni-primary;
     text-align: center;
     line-height: 50rpx;

     margin: 20rpx 30rpx;
}

.time-item.active {
     border: 1rpx solid #909090;
     background: #909090;
     color: #fff;
}

.space {
     height: 300rpx;
}

.save-p {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     padding: 30rpx 0;
     background: #fff;
     box-shadow: 0rpx 5rpx 18rpx 0rpx rgba(71, 77, 85, 0.19);
}

.save-btn {
     width: 646rpx;
     height: 80rpx;
     line-height: 80rpx;
     margin: 0 auto;
     color: #fff;
     background: $uni-primary;
     font-size: 32rpx;
     text-align: center;
     border-radius: 40rpx;

}

.pre-item {
     width: 100%;
     height: 132rpx;
     background: #FFFFFF;
     padding: 24rpx 0 24rpx 20rpx;
     box-sizing: border-box;
     position: fixed;
     left: 0;
     top: 0rpx;
     z-index: 10;

     .picon-pre {
          width: 22rpx;
          height: 40rpx;
          background: url('../../static/d9.png') no-repeat 0 0;
          background-size: cover;
          display: inline-block;
          position: absolute;
          left: 27rpx;
          top: 40rpx;
          transform: rotate(180deg);
     }

     .picon-next {
          width: 22rpx;
          height: 40rpx;
          background: url('../../static/d9.png') no-repeat 0 0;
          background-size: cover;
          display: inline-block;
          position: absolute;
          right: 27rpx;
          top: 40rpx;
     }

     .list-date {
          li {
               display: inline-block;
               margin-left: 32rpx;
               width: 60rpx;
               text-align: center;

               p {
                    font-size: 24rpx;
                    color: #BFBFBF;
                    margin-bottom: 14rpx;
               }

               h5 {
                    font-size: 20rpx;
                    color: #1E1E1E;
                    height: 38rpx;
                    line-height: 38rpx;
               }
          }

          li:first-child {
               margin-left: 44rpx;
          }

          li.active p {
               color: #FF5A20;
          }

          li.active h5 {
               background: #FF5D3D;
               border-radius: 8rpx;
               color: #FFFFFF;
          }
     }
}
</style>